<!-- 使用方法: 父组件必须使用v-model -->
<template>
  <div>
    <el-input v-if="props.type === 'phone'" v-model="mobile" @input="validateMobile" placeholder="input phone: 123-456-7890" :maxlength="12" :size="size" :readonly="readonly" :disabled="disabled"/>
    <el-input  v-else-if="props.type === 'date'" v-model="mobile" @input="validDob" @blur="validPropertyDob" placeholder="MM   |    DD    |    YYYY" :maxlength="10" :size="size" :readonly="readonly" :disabled="disabled"/>
    <el-input v-else-if="props.type === 'fax'" v-model="mobile" @input="validateMobile" placeholder="Fax" :maxlength="12" :size="size" :readonly="readonly" :disabled="disabled"/>
  </div>
	<!--
		注解:<ChartInput type="phone" v-model:value="inputValue" sonWidth="46" character="/"  />
		type:
			phone：电话
			fax ： 传真
			date： 日期
		character:间隔符号
			电话和传真 '-' ,
			日期 '/'
		sonWidth: 子input宽度,默认46px
	-->
</template>

<script lang="ts" setup>
import { reactive, toRef, onMounted, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus'
const obj:any = reactive({
	mobile: ''
});
const props = defineProps({
	type: String,
  size: {
		type: String,
    default: 'default',
	},
	readonly: {
		type: Boolean,
    default: false,
	},
	disabled: {
		type: Boolean,
    default: false,
	},
	sonWidth: String,
	character: String,
	value: String,
	param: String,
	test: String,
});
onMounted(()=>{
	// //console.log('类型type', props.value);
})


watch(
	() => props.value,
	 (value) => {
     if (value) {
			if (/^(n\/?a|a\/?n|na)$/i.test(value)) obj.mobile = "N/A";
       if (props.type === 'phone' || props.type === 'fax') {
        //console.log("value---",value)
				if(value?.indexOf('-') != -1){
          obj.mobile = value
        }else {
          if(value.length >= 10){
            nextTick(() => {
              reshowMobile(value)
            })
          }
        }
			}else{
        obj.mobile = value
      }
		} else {
      obj.mobile = "";
    }
	},
	{ immediate: true }
);

const emit = defineEmits(['update:value']);
const mobile = toRef(obj, 'mobile');

const validateMobile = (event) => {
	console.log('event', event);
	let val = event;
	if (val.length <= 12) {
		if (val.length > 3 && val.length < 9) {
			val = val.trim().replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{3})(?=\d)/g, '$1-');
		} else if (val.length >= 9) {
			if(val.indexOf('-') != -1){
				val = val.trim().replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{4})(?=\d)/g, '$1-');

			}else {
				val = val.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3')
			}
		}
		obj.mobile = val;

		if(obj.mobile && obj.mobile.indexOf('-')){
			let phone = JSON.parse(JSON.stringify(obj.mobile))
			phone = phone.split('-').join('')
			emit('update:value', phone);
		}
	}
};
const validDob = (event) => {
	let val = event;
	if (val.length <= 10) {
		if (val.length > 2 && val.length < 7) {
			val = val.trim().replace(/\s/g, '/').replace(/[^\d]/g, '/').replace(/(\d{2})(?=\d)/g, '$1/');
		} else if (val.length >=7) {
			if(val.indexOf('/') != -1){
				val = val.trim().replace(/\s/g, '/').replace(/[^\d]/g, '/').replace(/(\d{4})(?=\d)/g, '$1/');
			}else {
				val = val.replace(/(\d{2})(\d{2})(\d{4})/, '$1/$2/$3')
			}
		}
		obj.mobile = val;
		if(obj.mobile && obj.mobile.indexOf('-')){
      let phone = JSON.parse(JSON.stringify(obj.mobile))
			emit('update:value', phone);
		}
	}
};

const validPropertyDob = (e) => {
  // //console.log("dob",e.target.value)
  let resDob = e.target.value;
  const today = new Date();
	const birthDate = new Date(resDob);
  const diff = today.getTime() - birthDate.getTime();
  const year = birthDate.getUTCFullYear();
  const month = birthDate.getUTCMonth();
  const day = birthDate.getUTCDay();
  const isYearNaN = isNaN(year);
  const isMonthNaN = isNaN(month);
  const isDayNaN = isNaN(day);
  if (isYearNaN || isMonthNaN || isDayNaN) {
    ElMessage.warning("Please enter the correct birthday!")
    resDob = "";
  }
  // 年份不能小于1900 或者 不能超过今天
  if(year < 1900){
    ElMessage.warning("The year can not less than 1900 !")
    resDob = "";
  } else if (diff <= 0) {
    ElMessage.warning("Birthday cannot exceed today!")
    resDob = "";
  } else if (month > 12 || month < 0) {
    ElMessage.warning("The month can not less than 0 or exceed 12 !")
    resDob = "";
  } else if (day > 31 || day < 0) {
    ElMessage.warning("The day can not less than 0 or exceed 31 !")
    resDob = "";
  }
  emit('update:value', resDob);
}
// const valiFax = (event) => {
// 	let val = event.target.value;
// 	if (val.length <= 12) {
// 		if (val.length > 3 && val.length < 9) {
// 			val = val.trim().replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{3})(?=\d)/g, '$1-');
// 		} else if (val.length >= 9) {
// 			val = val.trim().replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{4})(?=\d)/g, '$1-');
// 		}
// 		obj.mobile = val;
// 		if(obj.mobile && obj.mobile.indexOf('-')){
// 			let phone = JSON.parse(JSON.stringify(obj.mobile))
// 			phone = phone.split('-').join('')
// 			emit('update:value', phone);
// 		}
// 	}
// };
const reshowMobile = (val) => {
  //console.log("reshowMobile---",val)
	if(val.indexOf('-') !== -1) return;
	if (val.length <= 12) {
		if (val.length > 3 && val.length < 9) {
			val = val.trim().replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{3})(?=\d)/g, '$1-');
		} else if (val.length >= 9) {
			if(val.indexOf('-') != -1){
				val = val.trim().replace(/\s/g, '-').replace(/[^\d]/g, '-').replace(/(\d{4})(?=\d)/g, '$1-');

			}else {
				val = val.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3')
			}
		}
		obj.mobile = val;
		if(obj.mobile && obj.mobile.indexOf('-')){
			let phone = JSON.parse(JSON.stringify(obj.mobile))
			phone = phone.split('-').join('')
			emit('update:value', phone);
		}
	}
};
</script>
<style lang="less" scoped>
	@import "@/assets/css/base.css";
	:deep(.el-input__wrapper){
    height: 57px;
    border: 1px solid #99a1af;
}
</style>